<template>
  <BasicDrawer
    v-bind="$attrs"
    :showFooter="true"
    @register="registerDrawer"
    @close="onClose"
    width="95%"
  >
    <PageWrapper>
      <div class="main-content print-form">
        <div class="box box-main">
          <div class="table-fdiv">
            <a-form
              :model="record"
              ref="formRef"
              name="basic"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
              autocomplete="off"
              @finish="onFinish"
              @finishFailed="onFinishFailed"
            >
              <table class="table-form">
                <tr>
                  <td class="form-label" width="80">序号</td>
                  <td class="form-label" colspan="4">
                    <a-form-item name="setVal" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[0].setVal" />
                    </a-form-item>
                  </td>
                </tr>
                <tr>
                  <td class="form-label" width="80">序号</td>
                  <td class="form-label">工位名称</td>
                  <td class="form-label">当前已采集工艺数据项</td>
                  <td class="form-label bg-green-100">设定值</td>
                  <td class="form-label">实际采集值</td>
                </tr>
                <tr>
                  <td class="form-label">1</td>
                  <td class="form-label" rowspan="3">OP040</td>
                  <td>P10.基座条码</td>
                  <td class="bg-green-100">
                    <a-form-item name="setVal" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[0].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">2</td>
                  <td>P10.打PIN位移</td>
                  <td>
                    <a-form-item name="setVal" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[1].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">3</td>
                  <td>P10.把手型号代码</td>
                  <td>
                    <a-form-item name="setVal" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[2].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">4</td>
                  <td class="form-label" rowspan="7">OP050</td>
                  <td>P20.1#螺丝扭矩</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[3].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">5</td>
                  <td>P20.2#螺丝扭矩</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[4].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">6</td>
                  <td>P20.3#螺丝扭矩</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[5].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">7</td>
                  <td>P20.4#螺丝扭矩</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[6].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">8</td>
                  <td>P20.5#螺丝扭矩</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[7].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">9</td>
                  <td>P20.基座条码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[8].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">10</td>
                  <td>P20.把手型号代码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[9].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">11</td>
                  <td class="form-label" rowspan="4">OP060</td>
                  <td>P30.右侧压入深度</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[10].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">12</td>
                  <td>P30.基座条码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[11].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">13</td>
                  <td>P30.左侧压入深度</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[12].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">14</td>
                  <td>P30.把手型号代码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[13].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">15</td>
                  <td class="form-label" rowspan="4">OP080</td>
                  <td>P40.压入力</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[14].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">16</td>
                  <td>P40.压入深度</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[15].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">17</td>
                  <td>P40.基座条码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[16].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">18</td>
                  <td>P40.把手型号代码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[17].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">19</td>
                  <td class="form-label" rowspan="4">OP110</td>
                  <td>P50.右侧压入力</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[18].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">20</td>
                  <td>P50.基座条码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[19].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">21</td>
                  <td>P50.左侧压入力</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[20].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">22</td>
                  <td>P50.把手型号代码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[21].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">23</td>
                  <td class="form-label" rowspan="7">OP130</td>
                  <td>P60.基座条码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[22].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">24</td>
                  <td>P60.手柄电动弹出值</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[23].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">25</td>
                  <td>P60.把手型号代码</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[24].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">26</td>
                  <td>P60.把手堵转电流</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[25].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">27</td>
                  <td>P60.把手空载拉力值</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[26].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">28</td>
                  <td>P60.把手空载电流</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[27].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">29</td>
                  <td>P60.把手解锁行程</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[28].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">30</td>
                  <td class="form-label">OP140-2</td>
                  <td>间隙8个点位，面差8个点位，漏装（NG/OK）</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[29].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>
                <tr>
                  <td class="form-label">31</td>
                  <td class="form-label">OP150</td>
                  <td>总成分贝值（执行器不单独采集）</td>
                  <td>
                    <a-form-item name="sbbh" :wrapper-col="{ offset: 0, span: 24 }">
                      <a-input v-model:value="record[30].setVal" />
                    </a-form-item>
                  </td>
                  <td></td>
                </tr>

              </table>
              <div class="form-actions" v-if="showButton">
                <a-form-item :wrapper-col="{ offset: 2, span: 16 }">
                  <a-button type="primary" html-type="submit">提交</a-button>
                </a-form-item>
              </div>
            </a-form>
          </div>
        </div>
      </div>
    </PageWrapper>
    <template #footer></template>
  </BasicDrawer>
</template>
<script lang="ts">
  import { Form, Input, FormItem } from 'ant-design-vue';
  // import 'ant-design-vue/dist/reset.css';
  // 引入样式
  export default defineComponent({
    name: 'ViewsMesCardForm',
    components: {
      AForm: Form,
      AInput: Input,
      AFormItem: FormItem,
    },
  });
</script>
<script lang="ts" setup>
  import { defineComponent, reactive, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import {
    kstMesProCardDataSave,
    kstMesProCardDataForm,
    KstMesProCardData
  } from '/@/api/mes/card/kstMesProCardData';
  const emit = defineEmits(['success', 'register']);
  const selectListRef = ref<Recordable[]>([]);

  const { showMessage } = useMessage();
  const listSelectRef = ref<any>(null);
  const showButton = ref(true);
  // const record = ref<KstMesProCardData>({} as KstMesProCardData);
  const record = ref<Array<{ id: number; setVal: string;}>>(
    Array.from({ length: 31 }, (_, index) => ({ id: index + 1, setVal: '' }))
  );
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    showButton.value = true;
    setDrawerProps({ loading: true });
    // await resetFields();
    const res = await kstMesProCardDataForm(data);
    // console.log('res==', res.kstMesProCardData);
    // record.value = (res.kstMesProCardData || {}) as KstMesProCardData;
    // console.log('record==', record.value);
    // record.value.__t = new Date().getTime();
    // // list 回显,遍历record 判断key值
    // for (const key in record.value) {
    //   // 如果key 和 selectListRef_ltwdSd1 的 ltwdSd1 相同，给 selectListRef_ltwdSd1 加入值
    //   if (key == 'ltwdSd1') {
    //     selectListRef_ltwdSd1.value = [
    //       {
    //         id: record.value[key],
    //         tagname: record.value[key],
    //       }
    //     ]
    //   }
    // }
    // if(data.marks == 'copy'){
    //   record.value.id = '';
    //   record.value.isNewRecord = true;
    //   record.value.moldCode = '';
    //   record.value.sbbh = '';
    // }
    setDrawerProps({ loading: false });
  });
  const onFinish = async (values: any) => {

    console.log('values==', values, record.value);
    return false;
    try {
      setDrawerProps({ confirmLoading: true });
      const params: any = {
        isNewRecord: record.value.isNewRecord,
        id: record.value.id,
      };
      console.log('submit', params, values, record);
      const res = await kstMesProCardDataSave(params, values);
      showMessage(res.message);
      setTimeout(closeDrawer);
      emit('success', values);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(t('您填写的信息有误，请根据提示修正。'));
      }
      console.log('error', error);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const onClose = () => {
    closeDrawer();
    showButton.value = false;
  };
  const onSelect = (field: string, values: Recordable[]) => {
    console.log('values==', values, field);
    record.value[field] = values[0].tagname;
  };
  const getRowspan = (index: number) => {
    // 根据索引返回适当的行跨度
    // 这里只是一个示例，您需要根据实际情况来实现
    if (index >= 3 && index <= 9) return 7;
    if (index >= 11 && index <= 14) return 4;
    if (index >= 15 && index <= 18) return 4;
    if (index >= 19 && index <= 22) return 4;
    if (index >= 23 && index <= 29) return 7;
    return 1;
  };
  const getWorkstationName = (index: number) => {
    // 根据索引返回工作站名称
    // 这里只是一个示例，您需要根据实际情况来实现
    if (index >= 0 && index <= 2) return 'OP040';
    if (index >= 3 && index <= 9) return 'OP050';
    if (index >= 11 && index <= 14) return 'OP060';
    if (index >= 15 && index <= 18) return 'OP080';
    if (index >= 19 && index <= 22) return 'OP110';
    if (index >= 23 && index <= 29) return 'OP130';
    if (index === 30) return 'OP140-2';
    if (index === 31) return 'OP150';
    return '';
  };
  const getDataItemName = (index: number) => {
    // 根据索引返回数据项名称
    // 这里只是一个示例，您需要根据实际情况来实现
    // ...
    return '';
  };
  const getItemName = (index: number) => {
    // 根据索引返回表单项的名称
    // 这里假设对于 OP040-OP050 使用 'setVal'，对于其他使用 'sbbh'
    // 您可能需要根据实际情况调整这个逻辑
    if (index >= 0 && index <= 9) return 'setVal';
    return 'sbbh';
  };
</script>
<style scoped>
  :root {
    --global-font-size: 16px; /* 定义一个全局字体大小变量 */
  }
  .box-header {
    display: flex;
    justify-content: flex-end;
  }
  .table-fdiv {
    min-width: 600px;
    max-width: 100%;
    margin: 0 auto;
    font-size: var(--global-font-size);
  }
  .table-fdiv h3 {
    text-align: center;
    padding: 10px;
    font-size: 15px;
    font-weight: bold;
  }

  .table-fdiv table {
    width: 100%;
    font-size: var(--global-font-size);
  }

  .table-fdiv .form-actions {
    padding-left: 0 !important;
    padding: 15px 0;
    text-align: center;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    right: 30px;
  }

  .table-form {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .table-form td {
    padding: 6px;
    border: 1px solid #ddd;
    min-width: 30%;
    position: relative;
  }

  .table-form .form-title {
    background-color: #f5f5f5;
    color: #466172;
    font-weight: bold;
    height: 35px;
  }

  .table-form .form-label {
    position: static;
    text-align: center;
    padding: 13px;
    min-width: 20%;
  }

  .table-form .form-label .required {
    color: #e02222;
  }

  .table-form input,
  .table-form select,
  .table-form textarea,
  .table-form .form-control,
  .table-form .select2-selection {
    border: 0;
    background-color: transparent;
    resize: none;
    box-shadow: none;
    border-radius: 0;
  }

  .table-form .form-control:focus,
  .table-form .select2-container--default.select2-container--focus .select2-selection--single,
  .table-form .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 0;
    border-bottom: 1px dotted #cdcdcd !important;
    box-shadow: none;
  }

  .table-form .select2-container .select2-selection--single .select2-selection__rendered {
    margin-top: -3px;
  }

  .table-form .form-control[readonly]:focus {
    border-bottom: 0 !important;
  }

  .table-form .input-group-btn > .btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #888;
  }

  .table-form .input-group-btn > .btn {
    height: 20px;
    padding: 0 6px 0 7px;
  }

  .table-form .icheck label {
    line-height: 28px;
  }

  .table-form .ui-jqgrid td {
    padding: 0;
    border: 0;
  }

  .table-form .ui-jqgrid tr.ui-row-ltr td input,
  .table-form .ui-jqgrid tr.ui-row-ltr td select,
  .table-form .ui-jqgrid tr.ui-row-ltr td textarea,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td input,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td select,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr td textarea,
  .table-form .ui-jqgrid tr.ui-row-ltr.ui-priority-secondary td input,
  .table-form .ui-jqgrid tr.ui-row-ltr.ui-priority-secondary td select,
  .table-form .ui-jqgrid tr.ui-row-ltr.ui-priority-secondary td textarea,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr.ui-priority-secondary td,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr.ui-priority-secondary td input,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr.ui-priority-secondary td select,
  .table-form .ui-jqgrid tr.ui-state-highlight.ui-row-ltr.ui-priority-secondary td textarea {
    background-color: transparent !important;
  }

  .table-form .ui-jqgrid tr.ui-state-highlight {
    background-color: #f6fbff !important;
  }
  .ant-form-item {
    margin-bottom: 0 !important;
  }
  .ant-input{
    border: 1px solid #ddd !important;
  }
</style>

